//index.js
//获取应用实例
const app = getApp()
const Pager = require('components/aotoo/core/index.js')
const lib = Pager.lib
let mkTab = require('components/modules/indexlist')

//模拟数据
import {data1, data2} from './data'

const createRecycleContext = require('../../miniprogram-recycle-view')
let data = data1.bodyList[0].data
const systemInfo = wx.getSystemInfoSync()


const adapterMenus = (data, isAll) => {
  let output = []
  if (isAll) {
    output.unshift({
      title: '全部',
      aim: 'onMenus?id=0',
      itemClass: 'active'
    })
  }
  data.map((item, ii) => {
    output.push({
      title: item.title,
      aim: 'onMenus?id='+item.type,
      itemClass: !isAll && ii === 0 ? 'active' : ''
    })
  })
  return output
}

const adapterListLR = (data) => {
  //左边图，右边内容
  return data.map(item => {
    return {
      img: { src: item.img, itemClass: 'item-pic', mode: 'aspectFill' },
      body: [
        {title: item.title+ '李大奔“FEVER · 烧”Special LIVE', itemClass: 'title-default textellipsis-2'},
        {
          title: [
            { title: '2020.01.01-2020.05.05', itemClass: 'item-time'},
            { title: '上海', itemClass: 'color-info'},
          ],
          titleClass: 'flex-row-between-center'
        }
      ],
      aim: 'onJump?id='+item.id,
      bodyClass: 'flex-1 flex-column-between'
    }
  })
}

const adapterListCard = (data) => {
  //左边图，右边内容
  return data.map(item => {
    return {
      dot: [
        {
          img: { src: item.img, mode: 'aspectFill', itemClass: 'ss-absolute pic br' }
        },
        {
          title: item.title,
          itemClass: 'flex-row-center-center ss-relative color-fff fw-bold size hei-p100 bg-000-op-9 br',
          'hover-class': 'bg-000-op-7'
        }
      ],
      itemClass: 'pic-150-r ss-relative',
      aim: 'onJump?id='+item.id,
    }
  })
}

Pager({
  data: {
    clicked: false,
    curType: 'l0',
    levelMenus: Pager.list({
      data: [
        {title: '普通列表', aim: 'onLevel?type=l0'},
        {title: '目的地', aim: 'onLevel?type=l1', itemClass: 'ml-default'},
        {title: 'recycle', aim: 'onLevel?type=l2', itemClass: 'ml-default'},
      ], 
      itemClass: 'ss-button btn-default',
      listClass: 'flex-row p-default abc'
    }),
    head: {$$id: 'head'},
    body: {$$id: 'body'},
    recycleList: [],
    // head: Pager.list({
    //   data: [],
    //   listClass: 'list-tabs',
    //   itemClass: 'item-title flex-1'
    // }),
    // body: Pager.list({
    //   data: [],
    //   listClass: 'bg-fff height-bar',
    //   itemClass: 'lr-item mlr-default',
    //   type: {
    //     is: 'scroll',
    //     'scroll-y': true,
    //   }
    // }),
  },
  onLevel(e, params, inst) {
    const type = params.type
    switch (type) {
      case 'l0':
        this.headData = adapterMenus(data1.headList)
        console.log(data1.bodyList, this.data.curType);
        this.bodyData = adapterListLR(data1.bodyList.find(item => item.type === 'gd').data)
        this.setData({
          clicked: true,
          head: {
            data: this.headData,
            listClass: 'list-tabs',
            itemClass: 'item-title flex-1'
          },
          body: {
            data: this.bodyData,
            listClass: 'bg-fff height-bar',
            itemClass: 'lr-item mlr-default',
            type: {
              is: 'scroll',
              'scroll-y': true,
            }
          }
        })
        break;
      case 'l2':
        this.setData({
          clicked: true,
          // recycleList: data1.bodyList[0].data
        })
        break;
    
      default:
        this.headData = adapterMenus(data2.headList)
        this.bodyData = adapterListCard(data2.bodyList.find(item => item.type === 'gd').data)
        this.setData({
          clicked: true,
          typeClass: 'flex-row bg-fff',
          headClass: 'wid-p26 bg-default',
          bodyClass: 'flex-1',
          head: {
            data: this.headData,
            // listClass: 'list-tabs-column wid-p100',
            itemClass: 'ss-block-menus'
          },
          body: {
            data: this.bodyData,
            listClass: 'ss-list-margin hei-p100 p-default',
            // itemClass: 'lr-item ',
          }
        })
        break;
    }
    inst.siblings().removeClass('active')
    inst.addClass('active')
    this.body.update(this.bodyData)
    this.setData({
      curType: type
    })
  },
  onMenus(e, params, inst) {
    const that = this
    const type = params.id
    let _bData = null
    if (this.data.curType === 'l1') {
      _bData = adapterListCard(data2.bodyList.find(item => item.type === type).data)
      this.body.update({data: [{title: '', itemClass: 'animate-load'}], listClass: 'hei-tabHei flex-row-center-center'}, () => {
        setTimeout(() => {
          that.body.update({data: _bData, listClass: 'ss-list-margin hei-p100 p-default'})
        }, 500);
      })
    }
    else {
      _bData = adapterListLR(data1.bodyList.find(item => item.type === type).data)
      this.body.update([{title: [{title: '', itemClass: 'animate-load-row'}], titleClass: 'wid-p100 hei-tabHei flex-row-center-center'}], () => {
        setTimeout(() => {
          that.body.update({data: _bData, listClass: 'bg-fff height-bar', itemClass: 'lr-item mlr-default',})
        }, 500);
      })
    }
    
    inst.siblings().removeClass('active')
    inst.addClass('active')
  },
  onReady: function() {
    this.head = this.getElementsById('head')
    this.body = this.getElementsById('body')
    this.showView()
  },
  genData: function() {
    return data.map(item => {
      return {
        img: item.img,
        title: item.title,
        height: 94
      }
    })
  },
  onPageScroll: function() {}, // 一定要留一个空的onPageScroll函数
  showView: function () {
    const ctx = this.ctx
    const newList = this.genData()
    // console.log('recycle data is', newList)
    // API的调用方式
    const st = Date.now()
    // ctx.splice(0, 0, newList, function() {
    //   // 新增加的数据渲染完毕之后, 触发的回调
    //   console.log('【render】use time', Date.now() - st)
    // })
    ctx.splice(newList, () => {
      // 新增加的数据渲染完毕之后, 触发的回调
      console.log('【render】deleteList use time', Date.now() - st)
      // this.setData({
      //   scrollTop: 1000
      // })
    })
  },
  scrollToLower: function(e) {
    // 延迟1s，模拟网络请求
    if (this.isScrollToLower) return
    // console.log('【【【【trigger scrollToLower')
    setTimeout(() => {
      this.isScrollToLower = true
      const newList = this.genData()
      this.ctx.append(newList, () => {
        this.isScrollToLower = false      //可放在请求接口成功后
      })
    }, 500);
  },
  onLoad: function() {
    var ctx = createRecycleContext({
      id: 'recycleId',
      dataKey: 'recycleList',
      page: this,
      itemSize: function(item, index) {
        return {
          width: systemInfo.windowWidth,
          height: item.height || 100
        }
      },
      // itemSize: function(item) {
      //   console.log(item, 'item');
      //   return {
      //     width: systemInfo.windowWidth,
      //     height: item.azFirst ? 130 : 120
      //   }
      // },
      placeholderClass: ['recycle-image', 'recycle-text'],
    })
    this.ctx = ctx;
  }
})